Vue.component("my-header", {
    template: `
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">Knowledge Forum</a>
                <nav class="nav" id="nav">
                    <ul v-for="(c,i) in calssify" style="float: left">
                        <li><a :href="'index.html?module=' + calssify[i].id">{{c.module}}</a></li>
                    </ul>
                </nav>
                <a href="personal.html" class="blog-user">
                    <i class="fa fa-qq"></i>
                </a>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
    `,
    data() {
        return {
            calssify: []
        }
    },
    created() {
        axios.get("QueryClassify.s").then(res => {
            this.calssify = res.data;
            console.log("QueryClassify=fffffffff",this.calssify);
        })
    }
})

Vue.component("my-section", {
    template: `
        <div class="inner">
            <article class="article-list bloglist" id="LAY_bloglist" v-for="(p,i) in post " >
               <section class="article-item zoomIn article">
                    <div class="fc-flag" v-if="p.goodpost==0">精品</div>
                    <h5 class="title">
                    <a :href="'read.html?postId='+ p.id">{{p.title}}</a>
                    </h5>
                    <div class="time">
                        <span class="day">{{day[i]}}</span>
                        <span class="month fs-18">{{month[i]}}<span class="fs-14">月</span></span>
                        <span class="year fs-18 ml10">{{year[i]}}</span>
                    </div>
                    <div class="content" style="overflow:hidden;">
                        <a :href="'read.html?postId='+ p.id" class="cover img-light">
                        <!--       TODO                -->
                        <img :src="p.img">
                        </a>
                        {{newbody[i].text}}
                    </div>
                    <div class="read-more">
                        <a :href="'read.html?postId='+ p.id" class="fc-black f-fwb">点击阅读</a>
                    </div>
                    <aside class="f-oh ">
                    <div class="f-fl tags">
                        <span class="fa fa-tags fs-16" ></span>
                        <a class="tag" v-for="k in keyword[i] " >{{k}}</a>
                    </div>
                    <div class="f-fr">
                        <span class="read">
                        <img src="image/icon/zan.png" width="13px" height="13px">
                        <i class="num" v-if="typeof(postredis)!=undefined">{{postredis[i].likesum}}</i>
                        </span>
                        <span class="read">
                        <img src="image/icon/like.png" width="13px" height="13px">
                        <i class="num" v-if="typeof(postredis)!=undefined">{{postredis[i].collectsum}}</i>
                        </span>
                        <span>
                        <i class="fa fa-comments fs-16"></i>
                        <a class="num fc-grey" v-if="typeof(postredis)!=undefined">{{postredis[i].commentsum}}</a>
                        </span>
                    </div>
                    </aside>
               </section>
               
               </el-pagination>
   
            
            </article>
                <el-pagination background
            layout="prev, pager, next"
            :total="total"  
             @current-change="query"
            :page-size="7">
        </div>
    `,
    data() {
        return {
            post: [],
            newbody:"",
            day: [],
            month: [],
            year: [],
            keyword: [],
            postredis: [],
            total: 0,
            module: '',
            searchtxt:''
        }
    },
    created() {
        this.Initialize();
        this.query();
    },
    methods: {
        Initialize() {
            var url = window.location.href;
            //判断是否有该参数
            var regPos = /module=\d+/;
            //取出module参数
            if (regPos.test(url)) {
                this.module = url.match(regPos);
                console.info(this.module);
            }
            var regPos1 = /search=.*/;
            //取出search参数
            if (regPos1.test(url)) {
                this.searchtxt = url.match(regPos1);
                console.info(this.searchtxt);
            }
        },
        query(page) {
            page = page || 1;
            module = this.module || "module=1";
            let url = "ClassifyQureyPost.s?";
            url += module;
            url += "&size=7&page=" + page;
            console.info(url);
            if(this.searchtxt!=""){
                url+="&"+this.searchtxt;
            }
            axios.get(url).then(res => {
                console.log("进入axios中")
                this.post = res.data.list;
                this.total = res.data.total;
                this.newbody=res.data.newbody;
                console.log("post=",this.post)
                console.log("newbody=",this.newbody)
                //帖子数量
                let len = this.post.length;
                let tday = new Array(len);
                let tmonth = new Array(len);
                let tyear = new Array(len);
                //帖子id 字符串
                let tid = "";
                //帖子关键词 二维数组第一维
                let tkeyword = new Array(len);
                for (let i = 0; i < len; i++) {
                    tyear[i] = this.post[i].begintime.substring(0, 4);
                    tmonth[i] = this.post[i].begintime.substring(5, 7);
                    tday[i] = this.post[i].begintime.substring(8, 10);
                    //帖子关键词 二维数组第二维
                    tkeyword[i] = this.post[i].keyword.split("|");
                    //地址
                    if (i != len - 1) {
                        tid += this.post[i].id + "-";
                    } else {
                        tid += this.post[i].id;
                    }
                }
                this.keyword = tkeyword;
                this.day = tday;
                this.month = tmonth;
                this.year = tyear;
                this.queryRedis(tid);
            })
        },
        queryRedis(id) {
            let url1 = "RedisPostindex.s?id=" + id;
            axios.get(url1).then(res => {
                this.postredis = res.data;
                console.log("postredis=")
                console.log(this.postredis)
            })
        }
    }
})

Vue.component("my-hotpost", {
    template: `
            <div class="other-item" id="categoryandsearch">
             <div class="search">
             <label class="search-wrap">
                 <input type="text" id="searchtxt" placeholder="输入关键字搜索" />
                 <span class="search-icon">
                     <i class="fa fa-search" @click="search"></i>
                 </span>
             </label>
             <ul class="search-result"></ul>
         </div>
         <ul class="category mt20" id="category" >
             <li data-index="0" class="slider"></li>
             <li data-index="1"><a><b>热门帖子</b></a></li>
                <!--      改链接       -->
             <li data-index="i"   v-for="(p,i) in post"><a :href="'read.html?postId='+ p.id">{{p.title}}</a></li>
         </ul>
     </div>
    `,
    data() {
        return {
            post: [],
            searchtxt:''
        }
    },
    created() {
        this.query();
    },
    methods: {
        query() {
            let url = "HotPost.s";
            console.info(url);
            axios.get(url).then(res => {
                this.post = res.data;
            })
        },
        search(){
            var stxt =document.getElementById("searchtxt").value;
            this.searchtxt=stxt;
            console.info("search:"+this.searchtxt);
            this.searchtxt.replaceAll(" ","");
            console.info(this.searchtxt);
            if( this.searchtxt!=''){
                window.location.href='index.html?search='+this.searchtxt;
            }else{
                alert('搜索内容为空');
            }
        }
    }
})